<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        库存管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>库存明细
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="formInline" label-width="100px">
            <el-form-item label="归属OEM">
              <el-input
                v-model="formInline.oemName"
                placeholder="请输入归属OEM"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属机构">
              <el-input
                v-model="mechanism"
                @focus="selectInstitution"
                readonly
                placeholder="请输入归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="formInline.toOfficeName"
                placeholder="请输入机构名"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构ID">
              <el-input
                v-model="formInline.officeCode"
                placeholder="请输入机构ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                v-model="formInline.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="来源机构">
              <el-input
                v-model="formInline.frOfficeName"
                placeholder="请输入来源机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="品牌名称">
              <el-select
                class="appointVip"
                v-model="formInline.channelUid"
                placeholder="请选择品牌"
                @change="ps"
              >
                <el-option
                  v-for="(val, index) in paizi"
                  :label="val.channelName"
                  :value="val.uid"
                  :key="index"
                ></el-option
              ></el-select>
            </el-form-item>
            
            <el-form-item label="商品名称">
              <el-input v-model="formInline.productName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品序列号">
              <el-input
                v-model="formInline.startSN"
                placeholder="开始商品序列号"
              ></el-input>
              <span> - </span>
              <el-input
                v-model="formInline.endSN"
                placeholder="结束商品序列号"
              ></el-input>
            </el-form-item>
            <el-form-item label="商户名称">
              <el-input
                v-model="formInline.merName"
                placeholder="请输入商户名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="商户手机号">
              <el-input
                v-model="formInline.merPhone"
                placeholder="请输入商户手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="激活状态" class="status">
              <el-select
                v-model="formInline.merOpenStatus"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="激活" value="0"></el-option>
                <el-option label="未激活" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入库时间">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="激活时间">
              <el-date-picker
                v-model="dataTimes"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="">
          <div class="buttons">
            <el-button v-if="isAuth('inventitorySearch')" type="primary" @click="queryAgentInfos">搜索</el-button>
              <el-button v-if="isAuth('inventitoryReset')" type="" @click="reset">重置</el-button>
            <div style="margin-left:40px;float:left">
            <el-button
              v-if="isAuth('batchTransfer')"
              type="primary"
              @click="officeList()"
              class="butt"
              >批量转让</el-button
            >
           
            <el-button v-if="isAuth('batchDelete')" type="primary" @click="del(2)" class="butt" 
              >批量删除</el-button
            > <el-button
              type="primary"
              @click="agentInfoExport"
              class="butt"
              v-if="totalNum>0"
              >批量导出</el-button
            ></div>
          </div>
          <div class="table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
              stripe
              border
              :row-style="{ height: '0px' }"
              :cell-style="{ padding: '0px' }"
              v-loading="listLoading"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                min-width="30"
              ></el-table-column>
              <el-table-column
                prop="oemName"
                min-width="150"
                show-overflow-tooltip
                label="归属OEM"
              ></el-table-column>
              <el-table-column
                prop="ofOfficeName"
                min-width="150"
                label="归属机构"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="toOfficeName"
                min-width="150"
                label="机构名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="officeCode"
                min-width="150"
                label="机构ID"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="phone"
                min-width="100"
                label="手机号"
              ></el-table-column>
              <el-table-column
                prop="frOfficeName"
                min-width="150"
                show-overflow-tooltip
                label="来源机构"
              ></el-table-column>
              <el-table-column
                prop="channelName"
                min-width="150"
                label="品牌名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="productNo"
                min-width="150"
                label="商品型号"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="productName"
                min-width="150"
                label="商品名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="productCode"
                min-width="180"
                label="商品序列号"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="createDate"
                min-width="160"
                label="入库时间"
              ></el-table-column>
              <el-table-column
                prop="merOpenStatus"
                min-width="80"
                label="是否激活"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.merOpenStatus == 0">激活</span>
                  <span v-if="scope.row.merOpenStatus == 1">未激活</span>
                </template>
              </el-table-column>
               
              <el-table-column
                prop="merOpenDate"
                min-width="160"
                label="激活时间"
              ></el-table-column>
              <el-table-column
                prop="merName"
                min-width="100"
                show-overflow-tooltip
                label="商户名称"
              ></el-table-column>
              <el-table-column
                prop="merPhone"
                min-width="110"
                label="商户手机号"
              ></el-table-column>
              <el-table-column
                prop="status"
                min-width="80"
                label="状态"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">启用</span>
                  <span v-if="scope.row.status == 1">停用</span>
                </template>
              </el-table-column>
              <el-table-column min-width="100" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    v-if="scope.row.status == '1' && isAuth('inventitoryDisabled')"
                    @click="updateStatus(scope.row.id, 0)"
                    >启用</el-button
                  >
                  <el-button
                    type="text"
                    style="color:#F56C6C"
                    v-if="scope.row.status == '0' && isAuth('inventitoryDisabled')"
                    @click="
                      updateStatus(scope.row.id, 1, scope.row.merOpenStatus)
                    "
                    >停用</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            background
            style="text-align: right; padding:0 20px;"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.page"
            :page-size="formInline.number"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[20, 50, 100]"
            :total="totalNum"
          ></el-pagination>
        </div>
      </div>
    </div>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from "qs";
import axios from "axios";
import Tree from "../tree/index";
import { Container } from 'element-ui';
// 批量导出
import { exportFile } from "../../plugins/expord"
export default {
  data() {
    return {
      dialog:false,
       activations:[],
      showType: false,
      officeName: "",
      Ptitle: "",
      total:"",
      institutionsData: [],
      SelectData: [],
      officeListData: [],
      attriData: {},
      jurisdiction: "",
      activationes:{
        oemUid: localStorage.getItem("uid"),
        productCode:"",
        merName:"",
        phone:""
      },
      shelves: {
        channelUid: "",
        productUid: "",
        officeUid: "",
        startSn: "",
        snNum: ""
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      formInline: {
        officeCode:"",
        oemUid: localStorage.getItem("uid"),
        productUid: "",
        productCode: "",
        batchNo: "",
        toOfficeName: "",
        frOfficeName: "",
        merOpenStatus: "",
        startDate: "",
        endDate: "",
        page: 1,
        idList:[],
        channelUid:"",
        number: 20,
      },
      list:{
        oemUid:"",
        productUid:"",
        sns:[]
      },
      channelTypeList:[],
      optionsBrandTypeNum:[],
      totalNum: 0, //总页数
      tableData: [],
      listLoading: false,
      detailsData: {},
      dataTime: [],
      dataTimes: [],
      sns: []
    };
  },
  components: {
    Tree
  },
  created(){
    var _this = this;
        https.mallBrand({oemUid: localStorage.getItem("uid")})
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.paizi = d.data.data;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {});
          
  },
  mounted() {
    this.queryAgentInfo()
    this.jurisdiction = localStorage.getItem("jurisdiction");   //权限字段获取
  },
  methods: {
    // 停用
    updateStatus(val,status,merOpenStatus){
      if(status==1 && merOpenStatus!=1){
        this.dialog=true
        this.val=val
        this.status=status
      }else{
        var _this = this;
      https.detailedStop({id: val,status: status,})
        .then(function (d) {
          if (d.data.code == "0000") {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
            _this.queryAgentInfo()
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          }
        })
        .catch(function (error) {});
      }
    },
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.attriData.officeUid = data.uid;
      // console.log(this.form.officeUid);
      //归属机构名字
      this.officeName = data.name;
      // this.form.officeUid = data.uid;
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },
    handleSelectionChange(val) {
      this.SelectData = val;
    },
    selectInstitution() {
      this.showType = true;
    },
    // 重置
    reset() {
      this.formInline.oemName=""
      this.formInline.merName=""
      this.formInline.merPhone=""
      this.formInline.productUid=""
      this.formInline.channelUid=""
      this.formInline.productName=""
      this.formInline.phone = "";
      this.formInline.productCode = "";
      this.formInline.page=1
      this.formInline.startSN="";
      this.formInline.endSN="";
      this.formInline.batchNo = "";
      this.formInline.merOpenStatus = "";
      this.formInline.frOfficeName = "";
      this.formInline.toOfficeName = "";
      this.formInline.startDate = "";
      this.formInline.merOpenStartDate="";
      this.formInline.merOpenEndDate="";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.formInline.officeCode = "";
      this.mechanism = "";
      this.dataTime = [];
      this.dataTimes = [];
      this.queryAgentInfo()
    },
    selectInstitution() {
      this.showType = true;
    },
    //   归属机构点击
    transmit(data) {
      this.mechanism = data.name
      this.formInline.officeUid = data.uid
    },
    // 删除按钮
    del(type, id) {
      let uid = [];
      if (type === 1) {
        uid.push({ snUid: +id });
      } else {
        if (this.SelectData.length < 1) {
          return layer.open({
            content:"请选择数据",
            skin: "msg",
            time: 2,
          });
          return;
        }
        for (let i = 0; i < this.SelectData.length; i++) {
          let pl = { snUid: +this.SelectData[i].id };
          uid.push(pl);
        }
      }
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        https.mallDeleteSn({ uid: uid }).then(res => {
          if (res.data.code !== "0000") {
            this.queryAgentInfo()
            return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,

          });
          }
          this.queryAgentInfo();
           return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
        });
      });
    },

    //批量转让
    officeList() {
      let uid=[]
      if (this.SelectData.length < 1) {
           return layer.open({
            content: "请选择数据",
            skin: "msg",
            time: 2,
          });
        }
        for (let i = 0; i < this.SelectData.length; i++) {
         let pl = { snUid: +this.SelectData[i].id };
          uid.push(pl);
        }
        this.$router.push({name:"exclusive",
        query:{
          uid:JSON.stringify(uid)
        }
        })
    },

    //批量转让关闭对话框
    dialogVisibleShow() {
      this.dialogVisible = false;
    },

    //搜索按钮
    queryAgentInfos(){
      this.formInline.page=1
      this.queryAgentInfo()
    },
    // 列表
    queryAgentInfo() {
      this.SelectData=[]
      this.listLoading = true;
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];
      if (this.dataTimes === null) this.dataTimes = [];
      this.formInline.merOpenStartDate = this.dataTimes[0];
      this.formInline.merOpenEndDate = this.dataTimes[1];
      https.storeDetailList(this.formInline).then(res => {
        if (res.data.code !== "0000") {
          return layer.open({
            content:res.data.msg,
            skin: "msg",
            time: 2,
          });
          this.listLoading = false;
          return;
        }
        this.tableData = res.data.data;
        this.totalNum = res.data.total;
        this.listLoading = false;
      });
    },


    //批量导出
    agentInfoExport() {
      if(this.SelectData.length>0){
        for (let i = 0; i < this.SelectData.length; i++) {
        //  let pl = { snUid: +this.SelectData[i].id };
          this.formInline.idList.push(+this.SelectData[i].id);
        }
      }else{
        this.formInline.idList=[]
      }

      var _this = this;
      exportFile("/api/mall/storeDetailList/excel/export",_this.formInline,"库存明细")
    },

    //每页几条数据
    handleSizeChange(val) {
      this.SelectData=[]
      this.formInline.number = val; //动态改变
      this.formInline.page = 1;
      this.queryAgentInfo();
    },
    queryAgentInfos() {
      this.SelectData=[]
      this.formInline.page = 1; //动态改变
      this.queryAgentInfo();
    },
    //当前页
    handleCurrentChange(val) {
      this.SelectData=[]
      this.formInline.page = val; //动态改变
      this.queryAgentInfo();
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
   height: 32px;
}
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.sousuojg6_10 {
  /* margin-top: 60px */
}
.content {
  margin-top: 36px;
  height: calc(100vh - 100px - 26px);
}
.sousuojg6_10 {
  width: calc(100vw - 240px);
}
</style>
